<template>
  <view class="container">
    <view class="header">
      <text class="text-[28rpx] font-bold">发布招聘信息</text>
    </view>
    
    <view class="post-form">
      <view class="form-group">
        <text class="label">职位名称</text>
        <input type="text" v-model="formData.jobTitle" class="input" placeholder="例如：SMT技术员"/>
      </view>
      
      <view class="form-group">
        <text class="label">公司名称</text>
        <input type="text" v-model="formData.company" class="input" placeholder="例如：中芯科技制造厂"/>
      </view>
      
      <view class="form-group">
        <text class="label">工作地点</text>
        <input type="text" v-model="formData.location" class="input" placeholder="例如：松江区"/>
      </view>
      
      <view class="form-group">
        <text class="label">经验要求</text>
        <input type="text" v-model="formData.experience" class="input" placeholder="例如：2年以上经验"/>
      </view>
      
      <view class="form-group">
        <text class="label">薪资范围</text>
        <view class="salary-input flex items-center">
          <input type="number" v-model="formData.salaryMin" class="input flex-1" placeholder="最低薪资"/>
          <text class="mx-[24rpx]">至</text>
          <input type="number" v-model="formData.salaryMax" class="input flex-1" placeholder="最高薪资"/>
          <text class="ml-[24rpx]">/月</text>
        </view>
      </view>
      
      <view class="form-group">
        <text class="label">职位标签</text>
        <view class="tags-container flex flex-wrap gap-[20rpx]">
          <view 
            v-for="(tag, index) in tags" 
            :key="index" 
            :class="['tag-option', { 'selected': tag.selected }]"
            @click="toggleTag(index)"
          >
            {{ tag.name }}
          </view>
        </view>
      </view>
      
      <view class="form-group">
        <text class="label">职位描述</text>
        <textarea 
          v-model="formData.description" 
          class="textarea" 
          placeholder="请输入职位描述..."
        />
      </view>
      
      <nut-button class="submit-btn" @click="submitForm">发布招聘</nut-button>
    </view>
    
    <view class="preview">
      <text class="preview-title text-[28rpx] font-bold">预览效果</text>
      <view class="job-card">
        <text class="job-title text-[28rpx] font-bold">{{ formData.jobTitle || 'SMT技术员' }}</text>
        <text class="company-info text-[24rpx] text-[#666]">
          {{ formData.company || '中芯科技制造厂' }} · 
          {{ formData.location || '松江区' }} · 
          {{ formData.experience || '2年以上经验' }}
        </text>
        <text class="salary text-[32rpx] text-[#f44336] font-bold">
          ¥{{ formData.salaryMin || 6500 }}-{{ formData.salaryMax || 8500 }}/月
        </text>
        <view class="tags flex flex-wrap gap-[16rpx]">
          <text 
            v-for="(tag, index) in selectedTags" 
            :key="index" 
            class="tag bg-[#f5f5f5] text-[#666] px-[16rpx] py-[8rpx] rounded-[8rpx] text-[24rpx]"
          >
            {{ tag }}
          </text>
        </view>
        <view class="footer flex justify-between text-[24rpx] text-[#999] mt-[20rpx]">
          <text>2天前发布</text>
          <nut-button class="apply-btn bg-[#1976d2] text-white px-[30rpx] py-[10rpx] rounded-[8rpx] text-[28rpx]">立即申请</nut-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { showToast } from '@tarojs/taro';

const formData = ref({
  jobTitle: '',
  company: '',
  location: '',
  experience: '',
  salaryMin: '',
  salaryMax: '',
  description: ''
});

const tags = ref([
  { name: '两班倒', selected: false },
  { name: '包吃住', selected: false },
  { name: '年终奖金', selected: false },
  { name: '带薪年假', selected: false },
  { name: '五险一金', selected: false },
  { name: '周末双休', selected: false }
]);

const selectedTags = ref([
  '两班倒',
  '包吃住',
  '年终奖金',
  '带薪年假'
]);

const toggleTag = (index) => {
  tags.value[index].selected = !tags.value[index].selected;
};

const submitForm = () => {
  // 简单的表单验证
  if (!formData.value.jobTitle || !formData.value.company) {
    showToast({ title: '请填写必填项', icon: 'none' });
    return;
  }
  
  // 这里可以添加实际的提交逻辑
  showToast({ title: '发布成功', icon: 'success' });
};
</script>

<style>
/* 保持与HTML相同的样式结构，但使用rpx单位 */
.container {
  width: 750rpx;
  max-width: 100%;
}

.header {
  text-align: center;
  margin-bottom: 40rpx;
}

.header h1 {
  color: #333;
  font-size: 28rpx;
  margin-bottom: 10rpx;
}

.post-form {
  background-color: white;
  border-radius: 16rpx;
  padding: 40rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 30rpx;
}

.label {
  display: block;
  margin-bottom: 8rpx;
  font-weight: bold;
  color: #555;
}

.input, .textarea {
  width: 100%;
  padding: 20rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.salary-input {
  display: flex;
  align-items: center;
}

.salary-input span {
  margin: 0 24rpx;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.tag-option {
  background-color: #f0f0f0;
  padding: 10rpx 20rpx;
  border-radius: 30rpx;
  cursor: pointer;
  font-size: 24rpx;
}

.tag-option.selected {
  background-color: #e3f2fd;
  color: #1976d2;
}

.submit-btn {
  background-color: #1976d2;
  color: white;
  border: none;
  padding: 24rpx 40rpx;
  border-radius: 8rpx;
  font-size: 32rpx;
  cursor: pointer;
  width: 100%;
  margin-top: 40rpx;
}

.preview {
  margin-top: 40rpx;
  background-color: white;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.preview-title {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 20rpx;
  padding-bottom: 10rpx;
  border-bottom: 1rpx solid #eee;
}

.job-card {
  border: 1rpx solid #eee;
  border-radius: 12rpx;
  padding: 30rpx;
  position: relative;
}

.job-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 4rpx;
  background-color: #1976d2;
  border-radius: 12rpx 0 0 12rpx;
}

.job-title {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.company-info {
  color: #666;
  font-size: 24rpx;
  margin-bottom: 10rpx;
}

.salary {
  color: #f44336;
  font-size: 32rpx;
  font-weight: bold;
  margin: 20rpx 0;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  margin: 20rpx 0;
}

.tag {
  background-color: #f5f5f5;
  color: #666;
  padding: 6rpx 16rpx;
  border-radius: 8rpx;
  font-size: 24rpx;
}

.footer {
  display: flex;
  justify-content: space-between;
  color: #999;
  font-size: 24rpx;
  margin-top: 20rpx;
}

.apply-btn {
  background-color: #1976d2;
  color: white;
  border: none;
  padding: 10rpx 30rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
  cursor: pointer;
}
</style>